<script setup>
import { reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useIuserInfoStore, useCurrentWatchStore  } from '@T2/store/users.ts';
import { findMenuPath } from '@T2/utils/utils.ts';
import { unitApi, warnApi } from '@T2/service/api.ts';
import WarnList from './warnList.vue';
import TaskList from './taskList.vue';
import Charts1 from './charts1.vue';
import Charts2 from './charts2.vue';
import Charts3 from './charts3.vue';
import Charts4 from './charts4.vue';

const router = useRouter();
const iuserInfoStore = useIuserInfoStore();
const { info, project_roles, created_company, admin_projects2 } = iuserInfoStore;
const isCoSuper = info.company === created_company;
const currentWatchStore = useCurrentWatchStore();
const { curMenus, curProject } = currentWatchStore;
const isProjectSuper = admin_projects2.includes(curProject.id) ? true : false;
const roleStr = project_roles.filter(i => i.project_id === curProject.id).map(j => j.name).join(',') || '';

const Resd = reactive({
  showCharts: false,
  units: [],
})
onMounted(async () => {
  Resd.units = await getUnitList();
  Resd.showCharts = true;
});

const getUnitList = () => {
  return new Promise((resolve, reject) => {
    unitApi({
      method: 'get',
      params: {}
    }).then(res => {
      resolve(res?.results || []);
    }).catch(err => {
      reject(err);
    })
  })
}

const goToWarnMenu = () => {
  const path = findMenuPath(curMenus, 'P/Manage/warn0');
  router.push(path);
}
const goToTaskMenu = () => {
  ElMessage.warning('该功能暂未开放！');
}
</script>

<template>
  <div class="view scroller-aside">
    <div class="grid-item1">
      <div class="grid-item11 card flex">
        <div class="analyse-item right-line flex-center-center">
          <img :src="require('@T2/assets/common/analyse_1.png')" />
          <div class="nums-box flex-column flex--center">
            <label>站点总数</label>
            <strong>{{ Resd.units.length }}</strong>
          </div>
        </div>
        <div class="analyse-item right-line flex-center-center">
          <img :src="require('@T2/assets/common/analyse_3.png')" />
          <div class="nums-box flex-column flex--center">
            <label>离线数</label>
            <!-- <strong>{{ Resd.units.length }}</strong> -->
            <strong>0</strong>
          </div>
        </div>
        <div class="analyse-item flex-center-center">
          <img :src="require('@T2/assets/common/analyse_4.png')" />
          <div class="nums-box flex-column flex--center">
            <label>异常数</label>
            <strong>{{ Resd.units.filter(i => i.warn_number).length }}</strong>
          </div>
        </div>
      </div>
      <div class="grid-item12 card flex-column">
        <div class="chart-header">
          <label>本月报警数</label>
        </div>
        <div class="charts-container">
          <Charts1 :unit="Resd.units" v-if="Resd.showCharts"/>
        </div>
      </div>
        
      <div class="grid-item13 card flex-column">
        <div class="chart-header">
          <label>本年报警</label>
        </div>
        <div class="charts-container">
          <Charts2 :unit="Resd.units" v-if="Resd.showCharts"/>
        </div>
      </div>
    </div>
    
    <div class="grid-item2 card flex-column">
      <div class="user-info flex">
        <div class="avator-box flex-center-center">{{ info.truename?.substr(-2, 2) }}</div>
        <div class="info flex-column flex-center">
          <strong>{{ info.truename }},您好！</strong>
          <p>
            <span v-if="roleStr">{{ roleStr }}</span>
            <span v-else-if="isCoSuper">超级管理员</span>
            <span v-else-if="isProjectSuper">项目管理员</span>
            <span v-if="isCoSuper || isProjectSuper || (roleStr && info.department?.name)"> | </span>
            <span v-if="info.department?.name">{{ info.department?.name }}</span>
            <span v-else-if="isCoSuper">全公司</span>
            <span v-else-if="isProjectSuper">全项目</span>
          </p>
        </div>
      </div>
      <div class="task-header flex">
        <label>今日待办</label>
        <div class="r-jump flex--center" @click="goToTaskMenu()">
          <span>全部待办</span>
          <el-icon><arrow-right /></el-icon>
        </div>
      </div>
      <div class="task-list-box">
        <TaskList />
      </div>
    </div>
    
    <div class="grid-item3">
      <div class="grid-item31 card flex-column">
        <div class="chart-header">
          <label>本月故障排名</label>
        </div>
        <div class="charts-container">
          <Charts3 :unit="Resd.units" v-if="Resd.showCharts"/>
        </div>
      </div>
        
      <div class="grid-item32 card flex-column">
        <div class="chart-header">
          <label>本年故障</label>
        </div>
        <div class="charts-container">
          <Charts4 :unit="Resd.units" v-if="Resd.showCharts"/>
        </div>
      </div>
    </div>
    <div class="grid-item4 card flex-column">
      <div class="warn-header flex">
        <label>实时报警</label>
        <div class="r-jump flex--center" @click="goToWarnMenu()">
          <span>查看更多</span>
          <el-icon><arrow-right /></el-icon>
        </div>
      </div>
      <div class="warn-list-box">
        <WarnList />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  padding: 24px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr minmax(400px, 28%);
  grid-template-rows: minmax(500px, 60%) minmax(328px, 40%);
  overflow: overlay;
  overflow-x: hidden;
}
.card {
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
}
.charts-container {
  flex: 1;
  overflow: hidden;
}
.chart-header,
.task-header,
.warn-header {
  label {
    font-weight: 600;
    font-size: 18px;
    color: rgba(17,17,17,0.9);
    position: relative;
    padding-left: 12px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 18px;
      width: 4px;
      background-color: #0079FE;
    }
  }
  .r-jump {
    margin-left: auto;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
  }
}
.chart-header {
  padding: 32px 32px 20px;
}
.task-header,
.warn-header {
  padding: 12px;
}

.grid-item1 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr auto;
  grid-template-rows: minmax(94px, 150px) 1fr;
}
/* 设备统计 */
.grid-item11 {
  grid-column: span 2;
  .analyse-item {
    width: calc(100% / 3);
    height: 100%;
    position: relative;
    img {
      width: 60px;
      height: 60px;
    }
    .nums-box {
      margin-left: 26px;
      label {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
      }
      strong {
        font-weight: 600;
        font-size: 32px;
        color: #111111;
        height: 45px;
        line-height: 45px;
      }
    }
  }
  .right-line::after {
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 50px;
    background-color: #EDEDED;
  }
}
/* 本月报警统计 */
.grid-item12 {
  min-width: 400px;
}
/* 本年报警统计 */
.grid-item13 {
  width: 25vw;
  min-height: 395px;
}

/* 个人信息待办 */
.grid-item2 {
  padding: 12px 0;
  .user-info {
    width: 100%;
    padding: 0 12px;
    .avator-box {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: #373E62;
      font-weight: 400;
      font-size: 20px;
      color: #FFFFFF;
      margin-right: 12px;
    }
    .info {
      strong {
        font-weight: 500;
        font-size: 18px;
        color: #111111;
        height: 28px;
        line-height: 28px;
      }
      p {
        height: fit-content;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
    }
  }
  .task-list-box {
    flex: 1;
    overflow: hidden;
  }
}

/* 故障 */
.grid-item3 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
/* 本月故障统计 */
.grid-item31 {
  
}
/* 本年故障统计 */
.grid-item32 {
  
}

/* 实时报警 */
.grid-item4 {
  .warn-list-box {
    flex: 1;
    overflow: hidden;
  }
}
</style>